<template>
	<view>
		<view v-if="myId==userId">
			<uni-fab ref="fab" :pattern="pattern" horizontal="right" vertical="bottom" direction="horizontal"
				@trigger="trigger" @fabClick="fabClick" />
		</view>

		<view style="margin-top: 65rpx; position: absolute;margin-bottom: 30rpx;padding-bottom: var(--window-bottom);">
			<!-- 一个完整动态 -->
			<view v-for="(moment,index) in moments" class="bg margin-bottom-lg">
				<!-- 用户信息区 -->
				<view class="flex justify-between margin-bottom padding-sm">
					<!-- 头像 -->
					<u-image :src="user.avr" width="100upx" height="100upx" mode="">
					</u-image>
					<view class="flex-sub margin-left text-white flex flex-direction justify-between">
						<view class="flex justify-between">
							<view>
								<!-- 昵称 -->
								<view class="margin-right-xs" style="display: inline-block;">
									<text>{{user.nick}}</text>
								</view>
								<!-- 性别 -->
								<view class="round" v-if="user.gender=='女'"
									style="display: inline-block;background-color: #582D4D; color: #FF659A;padding: 2upx 8upx;">
									<u-icon name="woman" color="#FF659A" size="24"></u-icon>
								</view>
								<view class="round" v-if="user.gender=='男'"
									style="display: inline-block;background-color: #4b56f1; color: #69a5ff;padding: 2upx 8upx;">
									<u-icon name="man" color="#69a5ff" size="24"></u-icon>
								</view>


								<view v-if="myId==userId"
									style="position: absolute;margin-top: -40rpx;margin-left: 430rpx;">
									<u-button @click='del(moment)' hover-class='none' class="delBtn">
										<uni-icons type="trash" size="15" color="#ffffff"></uni-icons>
										&nbsp;&nbsp;&nbsp;&nbsp;删除
									</u-button>
								</view>


								<view class="margin-right-xs margin-top-xs uniui-color"
									style="font-size: 10rpx;color: silver;">
									{{moment.logicTime}}
								</view>


							</view>
						</view>
					</view>
				</view>
				<!-- 内容区 -->
				<view class="margin-bottom-lg padding-left-lg padding-right-lg">
					<!-- 文字 -->
					<view style="color: white;margin-bottom: 10px;" @click="getDetail(moment.id)">
						<text> {{moment.content}}</text>
					</view>
					<!-- 图片 -->
					<view style="display: flex; flex-wrap: wrap; justify-content: space-between;">
						<view v-for="(img,index) in moment.imgs">
							<u-image :src="img" style="margin:  20rpx 0rpx;" width="330upx" height="330upx" mode=""
								@click="imgPreview(moment.imgs,index)">
							</u-image>
						</view>
					</view>
				</view>
				<!-- 操作区 -->
				<view style="display: flex;justify-content: space-between; padding:20rpx 50rpx">
					<!-- 已点赞 -->
					<view v-if="moment.likeMoment" class="card-actions-item" @click="cancelLike(moment)"
						style="justify-content: center;display: inline;">
						<uni-icons type="heart-filled" color="#ff4a4d"></uni-icons>
						<text class="action_text">{{moment.likeNum}}</text>
					</view>
					<!-- 未点赞 -->
					<view v-else class="card-actions-item" @click="giveLike(moment)"
						style="justify-content: center;display: inline;">
						<uni-icons type="heart" color="#999"></uni-icons>
						<text class="action_text">{{moment.likeNum}}</text>
					</view>
					<view class="card-actions-item" @click="getDetail(moment.id)" style="justify-content: flex-end;;">
						<uni-icons type="chatbubble" color="#999"></uni-icons>
						<text class="action_text">{{moment.discussNum}}</text>
					</view>
					<view class="card-actions-item" @click="getDetail(moment.id)" style="justify-content: flex-start;">
						<uni-icons type="eye" color="#999"></uni-icons>
						<text class="action_text">{{moment.readNum}}</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				moments: [],
				user: {},
				myId: 0,
				userId: 0,
				urls: [],
				pattern: {
					color: '#7A7E83',
					backgroundColor: '#fff',
					selectedColor: '#007AFF',
					buttonColor: '#007AFF',
					iconColor: '#fff'
				},
			}
		},
		onLoad(option) {
			this.userId = option.id;
			this.myId = uni.getStorageSync('userId');
			this.getData();
		},
		methods: {
			getData() {
				this.$myRequest({
					url: "/community/getUserMoments/" + this.myId + "/" + this.userId,
					method: "get",
				}).then(r => {
					console.log(r)
					if (r.data.code == "200") {
						this.user = r.data.data.user;
						this.moments = r.data.data.moments;
					}
				})
			},
			getDetail(id) {
				uni.navigateTo({
					url: '/pages/moment/momentDetail?id=' + id
				});
			},
			giveLike(moment) {
				console.log("点赞")
				moment.likeMoment = true;
				moment.likeNum++;
				this.$myRequest({
					url: '/community/giveLike/' + this.myId + '/' + moment.id
				})
			},
			// 取消点赞
			cancelLike(moment) {
				console.log("消赞");
				moment.likeMoment = false;
				moment.likeNum--;
				this.$myRequest({
					url: '/community/cancelLike/' + this.myId + '/' + moment.id
				})
			},
			imgPreview(imgs, index) {
				console.log("查看大图", imgs)
				this.urls = imgs;
				uni.previewImage({
					urls: this.urls,
					current: index, // 当前显示图片的http链接，默认是第一个
				})
			},
			del(moment) {
				console.log("删除 moment: ", moment);
				let that = this;
				uni.showModal({
					title: '确定删除',
					content: '删除动态后图片、评论等信息也将删除，且不可恢复',
					success(res) {
						if (res.confirm) {
							that.delMoment(moment)
						}
					}
				})
			},
			delMoment(moment) {
				this.$myRequest({
					url: '/community/del/' + moment.id
				}).then(r => {
					if (r.data.code == 200) {
						this.moments.splice(this.moments.indexOf(moment), 1);
						uni.showToast({
							title: '删除成功'
						})
					}
				})
			}
		}
	}
</script>

<style>
	.uni-card {
		background-color: aquamarine;
	}

	.topBarBox {
		flex-flow: row;
		justify-content: flex-start;
		display: flex;
		text-align: center;
	}

	.topBar {
		width: 375rpx;
		color: white;
		font-size: 30rpx;
		padding-top: 10rpx;
		padding-bottom: 30rpx;
	}

	.topBar_active {
		color: #3c8aff;
		width: 375rpx;
		font-size: 30rpx;
		padding-top: 10rpx;
		padding-bottom: 30rpx;
	}

	.nocare {
		width: 120rpx;
		height: 50rpx;
		color: white;
		font-size: 15rpx;
		background: #ff7aad;
		border: none;
	}

	.cared {
		width: 120rpx;
		height: 50rpx;
		color: #747474;
		font-size: 15rpx;
		background: #bfbfbf;
		border: none;
	}

	button::after {
		border: none
	}

	.action_text {
		color: white;
		margin-left: 20rpx;
	}

	.delBtn {
		width: 120rpx;
		height: 50rpx;
		color: white;
		font-size: 15rpx;
		background: #9d979e;
		border: none;
	}
</style>
